<template>
  <div>
    <el-button :icon="ArrowLeft" class="mb-2" @click="goBack()">返回</el-button>
    <el-row :gutter="24">
      <el-col :span="8" :xs="24"> <info /></el-col>
      <el-col :span="16" :xs="24">
        <main-box>
          <PlusSearch
            v-model="queryform"
            :columns="formConfig"
            :show-number="2"
            label-width="80"
            label-position="right"
            class="mb-xs"
            @search="initData()"
            @reset="initData()"
          />
          <PureTable
            ref="tableRef"
            border
            adaptive
            :loading="loading"
            :data="tableData"
            :columns="columns"
            :pagination="pagination"
            @page-size-change="initData()"
            @page-current-change="initData(false)"
          />
        </main-box>
      </el-col>
    </el-row>
    <detail ref="detailRef" />
  </div>
</template>

<script setup lang="tsx">
import { ref } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { useTableConfig } from "@/utils/tableConfig";
import info from "./modules/info.vue";
import detail from "./modules/detail.vue";

import { listApi } from "@/api/record/list";
import { diffDate } from "@/utils";
import dayjs from "dayjs";
import { parse } from "path";
const router = useRouter();
const route = useRoute();
const goBack = () => {
  router.back();
};

/* 搜索 */
const queryform = ref({
  type: "",
  time: [],
  searchValue: ""
});
const formConfig: PlusColumn[] = [
  {
    label: "时间",
    prop: "time",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "借还类型",
    prop: "type",
    valueType: "select",
    options: [
      { label: "全部", value: -1 },
      { label: "借出", value: 1 },
      { label: "归还", value: 2 }
    ]
  },
  {
    label: "用户名",
    prop: "searchValue"
  }
];

const getParams = () => {
  const params = {
    ...queryform.value,
    toolId: route.query.id
  } as any;
  if (params.time && params.time.length) {
    params.params = {
      startTime: params.time[0],
      endTime: params.time[1]
    };
  }
  delete params.time;
  params.type = params.type > 0 ? params.type : "";
  return params;
};
/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  {
    label: "借还类型",
    prop: "type",
    cellRenderer: ({ row }) => {
      const col = row.type == 1 ? "primary" : "success";
      const text = row.type == 1 ? "借出" : "归还";
      return <el-tag type={col}>{text}</el-tag>;
    }
  },
  {
    label: "时间",
    prop: "lendTime",
    formatter: row => {
      if (row.type == 1) {
        return row.lendTime;
      } else {
        return row.returnTime;
      }
    },
    width: 160
  },
  {
    label: "使用状态",
    prop: "useState",
    width: 100,
    cellRenderer: ({ row }) => {
      // 使用状态(1正常 2超时借出 3正常归还 4归还超时)
      let col = "";
      let text = "";
      switch (Number(row.useState)) {
        case 1:
          col = "primary";
          text = "正常";
          break;
        case 2:
          col = "danger";
          text = "超时借出";
          break;
        case 3:
          col = "success";
          text = "正常归还";
          break;
        case 4:
          col = "warning";
          text = "归还超时";
          break;
      }
      return <el-tag type={col}>{text}</el-tag>;
    }
  },
  {
    label: "超时时长",
    prop: "time",
    cellRenderer: ({ row }) => {
      const { isReturn, lendTime, returnTime } = row;

      // 最大期限 单位小时h
      const { maxLendTime } = row.tool;
      const endTime = dayjs(lendTime)
        .add(maxLendTime, "h")
        .format("YYYY-MM-DD HH:mm:ss");

      const startTime = Number(isReturn)
        ? returnTime
        : dayjs().format("YYYY-MM-DD HH:mm:ss");

      if (dayjs(startTime).diff(endTime) < 0) {
        return "无";
      } else {
        return (
          <el-link underline={false} type="danger">
            {diffDate(startTime, endTime)}
          </el-link>
        );
      }
    }
  },
  {
    label: "用户",
    prop: "nickName",
    formatter: ({ nickName, userName }) => nickName ?? userName
  },
  { label: "角色", prop: "roleName" },

  {
    label: "使用时长",
    prop: "useTime",
    formatter: ({ isReturn, lendTime, returnTime }) => {
      // 未归还:当前时间-借出时间 0
      // 己归还: 归还时间 - 借出时间 1
      return diffDate(lendTime, Number(isReturn) ? returnTime : null);
    },
    width: 180
  },
  {
    label: "操作",
    prop: "action",
    fixed: "right",
    cellRenderer: ({ row }) => {
      return (
        <el-link type="primary" underline={false} onClick={() => goDetail(row)}>
          查看
        </el-link>
      );
    }
  }
];
const initData = async (needInit = true) => {
  loading.value = true;
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
    ...getParams()
  } as any;
  await listApi(params).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
  loading.value = false;
};
initData();

const detailRef = ref(null);
const goDetail = row => {
  detailRef?.value.show(row);
};
</script>
